<template>
  <div :id="id" :style="{ width:width, height:height }"></div>
</template>

<script>
import echarts from 'echarts'
import { parseTime, chunk } from '@/utils'
import { sensorStation } from '@/api/api'

export default {
  props: {
    id: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '550px'
    },
    series: {
      type: Array,
      default: null
    },
    minute: {
      type: Number,
      default: 1      // 1, 5, 30, 60, 1440
    }
  },
  data() {
    return {
      legend: [],
      device: []
    }
  },
  watch: {
    minute() {
      if (this.series.length) {
        this.timeInterval()
      }
    },
    series() {
      if (this.series.length) {
        this.deviceInterval()
      }
    }
  },
  methods: {
    async deviceInterval() {
      const res = await sensorStation('post', { pageIndex: 1, pageSize: 1e4, orderBy: 'createdTime', orderByAscent: false}, false)
      res.data.items.forEach((item, index) => {
        // 设备data
        this.device[index] = []
        this.series.forEach(dID => {
          dID[dID.humidityLabel] = dID.humidity
          dID[dID.temperatureLabel] = dID.temperature
          dID[dID.coLabel] = dID.co
          dID[dID.cO2Label] = dID.cO2
          dID[dID.o2Lable] = dID.o2
          dID[dID.nO2Lable] = dID.nO2
          dID[dID.noiseLable] = dID.noise
          if (dID.deviceID === item.code) {
            this.device[index].push(dID)
          }
        })
        // 设备title
        this.legend = [...this.legend,  ...[
          item.humidityLabel,
          item.temperatureLabel,
          item.coLabel,
          item.cO2Label,
          item.o2Lable,
          item.nO2Lable,
          item.noiseLable
        ]]
      })
      this.timeInterval()
    },
    timeInterval() {
      if (this.minute === 1) {
        this.myChart(this.series)
      } else {
        let series = []
        this.device.forEach(die => {
          // 平均等分
          let evenly = chunk(die, this.minute).map((minute) => {
            let total = minute[0]
            // 平均值
            this.legend.forEach(item => {
              total[item] = (minute.map(node => {
                return Number(node[item])
              }).reduce((acc, cur) => { return acc + cur }) / minute.length).toFixed(2)
            })
            return total
          })
          series = [...series, ...evenly]
        })
        this.myChart(series)
      }
    },
    myChart(series) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById(this.id))
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        yAxis: {
          type: 'value'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: series.map(item => {
            return parseTime(new Date(item.logTime).getTime())
          })
        },
        legend: {
          left: '33%',
          data: this.legend.map(item => { return item })
        },
        series: this.legend.map(item => {
          return {
            type: 'line',
            name: item,
            data: series.map(node => {
              return Number(node[item])
            })
          }
        })
      })
    }
  }
}
</script>
